/**
 * @description 个人中心
 */

import style from './styles/Home.less';
import classnames from "classnames";
import React from 'react';
const Fragment = React.Fragment;
import { Icon, Button, List, ListItem, Dialog } from 'wd-mobile';
import Badge from "components/Badge";
import TabBar from "components/TabBar";

import { logout, isLogin } from "api_xukaiyu/app/login";
import { unconfirmed, appeal,saveAmount} from "api_zhoujianyi/front/app/order/count";
import { query_user_beans } from "api_xukaiyu/app/beans";
import { query_info } from "api_xukaiyu/app/user";
import { buy_credit_score,query_user_page_banner } from "api_xukaiyu/app/content";
import { _new } from "api_zhoujianyi/front/app/trade/count";
import * as beans from 'api_xukaiyu/app/beans';

import { countUserRedPacket } from "api_xukaiyu/app/coupons";
import { collectCount } from 'api_liuhaojie/app/goods';
import util from "commons/util";

import icon_unconfirmed from "images/icon/unconfirmed.png";
import icon_done from "images/icon/done.png";
import icon_wait_pay from "images/icon/wait_pay.png";
import icon_collect from "images/icon/collect.png";

import avator1 from "images/avatar/1.jpg";
import avator2 from "images/avatar/2.jpg";
import avator3 from "images/avatar/3.jpg";
import avator4 from "images/avatar/4.jpg";
import avator5 from "images/avatar/5.jpg";
import avator6 from "images/avatar/6.jpg";
import avator7 from "images/avatar/7.jpg";
import avator0 from "images/avatar/0.jpg";

import haidou from './images/icon_haidou.png'
import redPacket from './images/icon_redpacket.png'
import signCoin from './images/signCoin.png'

const avatarArr = [avator0, avator1, avator2, avator3, avator4, avator5, avator6, avator7];

// 环信客服初始化配置
window.easemobim = window.easemobim || {};
easemobim.config = {
    hide: true,
    autoConnect: true,
    hideKeyboard: true
};

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isLogin: false,
            waitPayCount: 0, // 待支付订单数量
            unconfirmed: 0, // 未确认数量
            appeal: 0,  // 争议中数量,
            query_info: {},
            buy_credit_score: 0, //购买信用分
            allBeans: 0,//嗨豆数量
            UserRedPacket: {
                totalMoney: 0,
                totalQuantity: 0
            },
            collectCount: 0,//收藏数量
            bannerInfo:{},
            saveAmount:0,//节省金额
            beans:{}
        }
    }
    componentDidMount() {
        // 是否登录
        isLogin().then(res => {
            this.setState({
                isLogin: true
            })
            return true;
        }).then(() => {
            // 查询购买信用分
            buy_credit_score().then(res => {
                this.setState({
                    buy_credit_score: res.data
                })
            })

            //签到状态
            beans.user_status().then(data => {
                this.setState({
                    beans: data.data
                })
            })

            //节省钱
            saveAmount().then(data=>{
                this.setState({
                    saveAmount:data.data
                })
            })

            //红包金额数量
            countUserRedPacket().then(data => {
                this.setState({
                    UserRedPacket: data.data || {}
                })
            })

            //收藏数量
            collectCount().then(data => {
                this.setState({
                    collectCount: data.data || 0
                })
            })

            //嗨豆数量
            query_user_beans().then(data => {
                this.setState({
                    allBeans: data.data || 0
                })
            })
            // 待支付订单数量
            _new().then(res => {
                this.setState({
                    waitPayCount: res.data
                })
            })
            // 查询未确认数量
            unconfirmed().then(res => {
                this.setState({
                    unconfirmed: res.data
                })
            })
            // 查询争议中数量
            appeal().then(res => {
                this.setState({
                    appeal: res.data
                })
            })
            // 我的信息
            query_info().then(res => {
                this.setState({
                    query_info: res.data
                })
                if (!res.data.wechatPortrait) {
                    let mobileArr = res.data.mobile.split("");
                    const avatarUrl = avatarArr[+mobileArr[mobileArr.length - 1] % 8];
                    this.setState({
                        avatar: avatarUrl
                    })
                }
            })
            //banner信息
            query_user_page_banner().then(data=>{
                this.setState({
                    bannerInfo:data.data
                })
            })
        })
    }
    render() {
        let { allBeans, waitPayCount,beans,saveAmount, unconfirmed, UserRedPacket, collectCount,bannerInfo,isLogin,query_info } = this.state;
        return (
            <Fragment>
                <div className={classnames(style.main, "x-scroll-y")}>
                    <div className={classnames(style.head, "x-part")}>
                        <div className={style.userInfo}>
                            <div className={style.userAvatar} style={{ backgroundImage: `url(${query_info.wechatPortrait || this.state.avatar||avator0})` }}></div>
                            <div className={style.userNameAndCredit}>
                                <div className={style.userName} onClick={() => {
                                    if (!isLogin) {
                                        location.replace(`./login.html${util.joinQueryString({
                                            redirectUrl: location.href
                                        })}`)
                                    }
                                }}><span>{query_info.wechatNickname || query_info.mobile || "请先登录"}</span></div>
                                <div hidden={!isLogin} className={style.userCredit} onClick={() => {
                                    Dialog.alert(`每成交一单将获得${this.state.buy_credit_score}分，每产生纠纷并被判定为责任方会扣除分数，信用分高低与当日交易上限量有关。`, "信用分")
                                }}>
                                    <div className={style.userCreditTag}>信用分</div>
                                    <span className={style.userCreditScroe}>{query_info.score}</span>
                                    <Icon className="x-icon-arrow-left" rotate={180} />
                                </div>
                                <div hidden={!isLogin} className={style.saveMoney}>已为您节省{saveAmount}元</div>
                            </div>
                            {isLogin?<div className={style.signBtn} onClick={()=>{location.href="./hibeans.html#/Home"}}><img src={signCoin} alt=""/> 签到</div>:""}
                        </div>
                        <div className={style.userMoneyShortcut}>
                            <div className={style.redPacket} onClick={() => {
                                location.href = "./redpacket.html"
                            }}>
                                <div className={style.imgs}><img src={redPacket} alt="" /></div>
                                <div className={style.info}>
                                    <div className={classnames(style.name,{[style.hasNew]:UserRedPacket.isNew==1})}>红包</div>
                                    <div className={style.describtion}>畅享优惠</div>
                                </div>
                                <div className={style.money}>￥{UserRedPacket.totalMoney}</div>
                            </div>
                            <div className={style.haidou} onClick={() => {
                                location.href = './hibeans.html#/Home'
                            }}>
                                <div className={style.imgs}><img src={haidou} alt="" /></div>
                                <div className={style.info}>
                                    <div className={style.name}>嘿豆</div>
                                    <div className={style.describtion}>{beans.hasSign?'嘿豆抵现':'签到领嘿豆'}</div>
                                </div>
                                <div className={style.money}>{allBeans}</div>
                            </div>
                        </div>
                    </div>
                    <div className={style.userBaseShortcut}>
                        <div className={style.userBaseShortcutItem} onClick={() => {
                            location.href = "./order.html#/List/waitPay"
                        }}>
                            <Badge count={waitPayCount} maxCount={99}>
                                <img src={icon_wait_pay} alt="" />
                            </Badge>
                            <div className={style.userBaseShortcutItemText}><span>待支付</span></div>
                        </div>
                        <div className={style.userBaseShortcutItem} onClick={() => {
                            location.href = "./order.html#/List/unconfirmed"
                        }}>
                            <Badge count={unconfirmed} maxCount={99}>
                                <img src={icon_unconfirmed} alt="" />
                            </Badge>
                            <div className={style.userBaseShortcutItemText}><span>未确认</span></div>
                        </div>
                        <div className={style.userBaseShortcutItem} onClick={() => {
                            location.href = "./order.html#/List/finish"
                        }}>
                            <img src={icon_done} alt="" />
                            <div className={style.userBaseShortcutItemText}><span>已完成</span></div>
                        </div>
                        <div className={style.userBaseShortcutItem} onClick={() => {
                            location.href = "./order.html#/Favorite/FavoriteGoods"
                        }}>
                            <img src={icon_collect} alt="" />
                            <div className={style.userBaseShortcutItemText}><span>收藏夹<span className={style.collectNum}>（{collectCount}）</span></span></div>
                        </div>
                    </div>
                    {bannerInfo.bannerPic?<div className={classnames(style.banner,"wdskeleton-translate")} onClick={() => {
                        location.href = `${bannerInfo.linkUrl}`;
                    }}>
                        <img src={bannerInfo.bannerPic} alt="" />
                    </div>:""}
                    <div className={classnames(style.toolList, "x-part")}>
                        <div className={style.toolListContainer}>
                            <List renderHeader={''}>
                                <ListItem title={<span className={style.toolItemName}>加入社群</span>} arrow="right" onClick={() => {
                                    location.href = `https://${location.host}/h5/mall/market.html#/ArticleDetail/14`
                                }} />
                                <ListItem title={<span className={style.toolItemName}>账号设置<span className={style.toolItemNameTip}>（绑定邮箱）</span></span>} arrow="right" onClick={() => {
                                    location.href = `./myCenter.html#/Settings`
                                }} />
                                <ListItem title={<span className={style.toolItemName}>卖家中心</span>} arrow="right" onClick={() => {
                                    if(query_info.isSeller=='1'){
                                        location.href = "./myCenter.html#/sellerCenter"
                                    }else{
                                        location.href = "./sellerEnter.html#/Form"
                                    }
                                }} />
                                <ListItem title={<span className={style.toolItemName}>帮助中心</span>} arrow="right" onClick={() => {
                                    location.href = "./helpCenter.html#/Buyer"
                                }} />
                                <ListItem title={<span className={style.toolItemName}>意见反馈</span>} arrow="right" onClick={() => {
                                    location.href = "./myCenter.html#/Feedback"
                                }} />
                                <ListItem title={<span className={style.toolItemName}>联系客服</span>} arrow="right" onClick={() => {
                                    location.href = "https://m.shwzfa.cn/h5/mall/market.html#/ArticleDetail/14"
                                }} />
                            </List>
                        </div>
                    </div>
                    {
                        !!this.state.isLogin && <div className={style.logOut}>
                            <Button inline className={style.logOutBtn} onClick={() => {
                                Dialog.confirm(<div className={style.sureToLogOut}>是否确定退出？</div>, "提示", undefined, {
                                    onOk: () => {
                                        logout({
                                            appType: "H5"
                                        }).then(res => {
                                            location.reload();
                                            sessionStorage.clear()
                                        })
                                    },
                                    onCancel: () => { },
                                    buttons: { "确认退出": true, '取消': false }
                                });
                            }}>退出登录</Button>
                        </div>
                    }
                </div>
                <TabBar activeIndex={3} />
            </Fragment >
        )
    }
}

export default App;